<template>
	<div id="pageBox">
		<div id="page" v-if="!pageLoading">
			<PageNav :navList="navList" :active="active" @tabChange="onTabChange"></PageNav>
			<div class="study pd14">
				<div v-for="(item, index) in studyList" :key="index" class="study-list">
					<router-link :to="{path: '/details', query: {id: item.projectId}}">
						<div class="study-list-cover">
							<img :src="item.coverImg" alt="">
						</div>
						<div class="study-list-main">
							<p class="study-title">{{ item.title }}</p>
						</div>
					</router-link>
				</div>
			</div>
			<div class="hotList pd14">
				<HotList :hotList="hotList"></HotList>
			</div>
		</div>
		<img class="loading" v-if="pageLoading" src="@/assets/img/loading.gif">
	</div>
</template>

<script type="text/javascript">
	import PageNav from "@/components/pageNav";
	import HotList from "@/components/hotList";
	import { getLearning, getPurchased } from '@/api/study'
	import { getNewHot } from '@/api/project'
	export default {
		components:{
			PageNav,
			HotList
		},
		data(){
			return {
				pageLoading:false,
				navList:["最近学些","已购课程"],
				active: 1,
				studyList: [],
				hotList:[],
			}
		},
		created(){
			this.getList()
			this.getHotList()
		},
		methods:{
			getList() {
				this.active == 1 ?  this.getLearning() : this.getPurchased()
			},
			getLearning() {
				getLearning().then(res => {
					this.studyList = res.page.list
				})
			},
			getPurchased() {
				getPurchased().then(res => {
					this.studyList = res.page.list
				})
			},
			onTabChange(active) {
				console.log('active', active)
				this.active = active
				this.getList()
			},
			getHotList() {
				getNewHot('hottest').then(res => {
					this.hotList = res.page.list
				})
			}
		},
		
	}
</script>

<style lang="less" scoped>
	.study{
		padding-top: 20px;
		padding-bottom: 10px;
	}
	.study-list{
		overflow: hidden;
		margin-bottom: 20px;
		a{
			display: block;
			overflow: hidden;
		}
	}
	.study-list-cover{
		float: left;
		width: 1.64rem;
		height: 1rem;
		float: left;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.study-list-main{
		padding-left: 1.77rem;
	}
	.study-title{
		font-weight: bold;
		font-size: 0.16rem;
		line-height: 2;
		color: #333;
	}
</style>
